package com.wonderful.compose.blur

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.graphics.nativeCanvas
import androidx.compose.ui.input.pointer.positionChange
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.wonderful.compose.R
import com.wonderful.compose.ui.theme.BookingBackground
import com.wonderful.compose.ui.theme.ComposeLearnTheme

/**
 * Desc:
 * @Author: wonderful
 * @Time: 2024/2/1 15:26
 */
class BlurViewActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeLearnTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = BookingBackground
                ) {
                    BlurView {
                        BlurContent()
                    }
                }
            }
        }
    }
}

@Composable
fun BlurView(paintWidth: Dp = 15.dp, blurRadius: Dp = 10.dp, content: @Composable () -> Unit) {

    var motionEvent by remember { mutableStateOf(MotionEvent.IDLE) }
    var curPosition by remember { mutableStateOf(Offset.Unspecified) }
    var prePosition by remember { mutableStateOf(Offset.Unspecified) }

    Box(
        modifier = Modifier.dragMotionEvent( // 添加手势监听
            onDragStart = {
                motionEvent = MotionEvent.DOWN
                curPosition = it.position
                if (it.pressed != it.previousPressed) it.consume()
            },
            onDrag = {
                motionEvent = MotionEvent.MOVE
                curPosition = it.position
                if (it.positionChange() != Offset.Zero) it.consume()
            },
            onDragEnd = {
                motionEvent = MotionEvent.UP
                if (it.pressed != it.previousPressed) it.consume()
            })
    ) {
        // 原内容放到底层
        Column {
            content()
        }

        // 模糊后的内容叠加上去
        Column(
            modifier = Modifier
                .fillMaxSize()
                .blur(blurRadius)
                .drawWithCache {
                    // 根据手势获取到的坐标信息，在绘制时通过 Path 实时绘制用户的手势轨迹：
                    val curPath = Path()
                    onDrawWithContent {
                        with(drawContext.canvas.nativeCanvas) {
                            val checkPoint = saveLayer(null, null)
                            when (motionEvent) {
                                MotionEvent.DOWN -> {
                                    curPath.moveTo(curPosition.x, curPosition.y)
                                    prePosition = curPosition
                                }

                                MotionEvent.MOVE -> { // 绘制手势轨迹
                                    curPath.quadraticBezierTo(
                                        prePosition.x,
                                        prePosition.y,
                                        (prePosition.x + curPosition.x) / 2,
                                        (prePosition.y + curPosition.y) / 2
                                    )
                                    prePosition = curPosition
                                }

                                MotionEvent.UP -> {
                                    curPath.lineTo(curPosition.x, curPosition.y)
                                    curPosition = Offset.Unspecified
                                    prePosition = curPosition
                                    motionEvent = MotionEvent.IDLE
                                }

                                else -> Unit
                            }

                            drawContent()

                            drawPath(
                                path = curPath,
                                color = Color.White,
                                alpha = 1f,
                                style = Stroke(width = paintWidth.toPx()),
                                blendMode = BlendMode.DstOut
                            )

                            restoreToCount(checkPoint)
                        }
                    }
                }
//                .drawWithContent {
//                    // 绘制出原画布内容（即模糊后的图层）
//                    drawContent()
//
//                    // 绘制圆
//                    drawCircle(
//                        Color.White,
//                        blendMode = BlendMode.DstOut // 指定混合模式为 BlendMode.DstOut，这样绘制的圆就不模糊
//                    )
//                }
        ) {
            content()
        }
    }

}

@Composable
fun BlurContent() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.LightGray)
    ) {
        Image(
            painter = painterResource(id = R.drawable.prince_christian_sound),
            contentDescription = ""
        )
        Text(
            text = "龙年行大运，祥瑞照门庭。岁月悠悠，情谊绵长，感恩有您相伴。愿您在新的一年里，如龙腾飞，事业兴旺；如龙入海，生活美满。祝您龙年吉祥如意！龙年威仪照世间，岁月悠长福寿全。愿君如龙舞九天，事业有成步步高。春风得意马蹄疾，新年吉祥如意来。祝您龙年大吉大利，万事顺遂心欢畅。龙年到来，祥瑞满天。愿您如龙般矫健，事业腾飞；如龙鳞闪耀，生活美满。祝您龙年大吉，万事如意！龙年到来，祝福满满。愿你在新的一年里，如龙腾飞，事业有成；如龙出海，财源广进；如龙入云，身体康健。龙年快乐，阖家幸福！恭贺新禧，龙年吉祥！在这辞旧迎新的美好时刻，愿您如龙腾飞，事业蒸蒸日上；如龙入海，财源滚滚而来。龙年行大运，万事如意！龙年威武，祥瑞满天。愿你在新的一年里，如龙腾飞，事业有成；如龙出海，财源广进；如龙行天下，步步高升。龙年快乐，万事如意！龙年行大运，吉祥如意伴你行。祝你在新的一年里事业有成，步步高升；财源广进，金玉满堂；身体康健，福寿双全。龙年大吉，万事胜意！亲爱的XXX，龙年到来之际，祝你如龙腾飞，事业有成；如龙般坚韧，无惧挑战；如龙般幸运，步步高升。龙年快乐，万事胜意！",
            fontSize = 32.sp, color = Color(170, 56, 30)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun BlurPreview() {
    BlurView {
        BlurContent()
    }
}